<template>
  <!-- 建立考核模板-基础信息 -->
  <div style="display:flex;flex-direction: column; align-items: center;margin:10px">
    <el-card class="ensemble" shadow="always">
      <el-row>
        <el-button
          icon="el-icon-arrow-left"
          size="small"
          @click="returns()"
          style="background: #E6E6E6;"
        >返回</el-button>
        <span style="font-weight:800;margin-left:10px;font-size:18px">提醒记录</span>
      </el-row>
    </el-card>
    <!-- 基础信息表单部分 -->
    <div class="formContent">
      <el-row style="display: flex;justify-content:space-between;align-items:center">
        <el-row>
          <el-button
            style="background-color: #E86565;color: #fff;border-radius:4px;height: 32px;line-height: 6px;margin: 10px 0px;"
            @click="deleteSelected"
            :disabled="deletes"
          >标为已读</el-button>
        </el-row>
        <el-row style="margin-left:52%">
          <el-form style="display:flex;padding-top:15px;margin-left:10px">
            <el-form-item label="年份" style="line-height:15px">
              <el-date-picker
                style="width:78%;"
                type="year"
                value-format="yyyy"
                v-model="ruleForm.year"
                format="yyyy年"
                placeholder="请选择"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="专项">
              <el-select clearable style="width:78%;" placeholder="请选择" v-model="ruleForm.name">
                <el-option
                  v-for="item in tableData1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="类别">
              <el-select clearable style="width:78%;" placeholder="请选择" v-model="ruleForm.type">
                <el-option label="月度" value="1"></el-option>
                <el-option label="年中" value="2"></el-option>
                <el-option label="年末" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-button
              @click="sousuo()"
              type="primary"
              style="height:32px; padding:8px 20px;margin-top:4px"
            >搜索</el-button>
          </el-form>
        </el-row>
      </el-row>

      <el-row>
        <el-table
          :data="tableData"
          style="width: 100%; color: #333333;font-size: 14px"
          height="662"
          align="center"
          :header-cell-style="{ background: '#ECF1F9' }"
          @selection-change="handleSelectionChangeDepartment"
        >
          <el-table-column type="selection" width="80" align="center"></el-table-column>
          <el-table-column fixed type="index" align="center" label="序号" width="80"></el-table-column>
          <el-table-column prop="year" align="center" label="年份" width="120"></el-table-column>
          <el-table-column prop="managementName" align="center" label="业务专项"></el-table-column>
          <el-table-column prop="businessSubType" align="center" label="提醒类别" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.businessSubType==1">{{ '月度' }}</span>
              <span v-if="scope.row.businessSubType==2">{{ '年中' }}</span>
              <span v-if="scope.row.businessSubType==3">{{ '年末' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="content" align="center" label="提醒内容"></el-table-column>
          <el-table-column prop="createTime" align="center" label="提醒时间"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.isRead==0"
                type="text"
                size="small"
                style="color: #E86565"
                @click="delMoney(scope.row)"
              >标为已读</el-button>
              <el-button v-if="scope.row.isRead==2" type="text" size="small" style="color: #ccc">已读</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-pagination
            style="text-align: right;margin-top:16px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-row>
    </div>
    <!-- v-on:titleChanged="updateTitle" -->
  </div>
</template>
  <script>
import { getyiduList, getAllkyFundManagement, biaoJI } from "@/api2/keyan"; //
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        type: "",
        year: ""
      },
      num: "",
      deletes: true,
      pageNum: 1, //当前页
      total: 0, //总条数
      tableData: [], //当前页码的表格数据
      tableData1: [], //当前页码的表格数据
      pageSize: 10, //当前页容量;
      multipleSelectionDepartment: ""
    };
  },
  created() {
    this.getyiduLists();
    this.getList1();
  },
  methods: {
    //批量标记已读
    deleteSelected() {
      this.$confirm("此操作将为选中所有内容标记为已读, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let arr = [];
          let vals = this.multipleSelectionDepartment; //选中的值
          if (vals) {
            vals.map(item => {
              arr.push(item.id);
            });
          }
          const id = arr.join();
          const type = 1;
          console.log(id);
          biaoJI(id, type).then(res => {
            if (res.code == 0) {
              this.$message.success("标记成功");
              this.getyiduLists();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消标记"
          });
        });
    },
    delMoney(row) {
      this.$confirm("此操作将为选中所有内容标记为已读, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const id = row.id;
          const type = 1;
          biaoJI(id, type).then(res => {
            console.log(res);
            if (res.code == 0) {
              this.$message.success("标记成功");
              this.getyiduLists();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消标记"
          });
        });
    },
    //搜索
    async sousuo() {
      if (
        this.ruleForm.name == "" &&
        this.ruleForm.year == "" &&
        this.ruleForm.type == ""
      ) {
        this.getyiduLists(); //获取表格数据
      } else {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          businessType: this.ruleForm.type,
          managementName: this.ruleForm.managementName,
          year: this.ruleForm.year
        };
        const res = await getyiduList(params);
        if (res.code == 0) {
          this.tableData = res.data;
          this.total = res.total; //总条数
        }
      }
    },
    //获取数据
    async getyiduLists() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      const res = await getyiduList(params);
      this.tableData = res.data;
      this.total = res.total;
    },
    //获取所有专项
    getList1() {
      const params = {
        specialPurposeType: 6,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getAllkyFundManagement(params)
        .then(res => {
          console.log(res);
          this.tableData1 = res.data;
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 用于保存选中的行
    handleSelectionChangeDepartment(val) {
      this.multipleSelectionDepartment = val;
      if (val) {
        this.deletes = false;
      } else {
        this.deletes = true;
      }
    },
    returns() {
      this.$emit("fatherMethod", false);
    },
    //分页逻辑{
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.sousuo();
    },

    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.sousuo();
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.ensemble {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  width: 100%;
  .ensemble1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.formContent {
  width: 100%;
}
</style>